<template>
  <div style="background: #f0f2f5;">
    <query-layout title="菜单管理" :paging="paging" @pageChange="pageChange">
      <a-button slot="btn" type="primary" @click="add">
        新增
      </a-button>
       <template slot="form">
        <a-form-model ref="form" layout="inline" :model="form">
          <a-form-model-item label="商品名称" prop="originGoodsName">
            <a-input v-model="form.originGoodsName" style="width: 170px;" placeholder="请输入商品名称"/>
          </a-form-model-item>
          <a-form-model-item label="商品配置" prop="configuration">
            <a-input v-model="form.configuration" style="width: 170px;" placeholder="请输入商品配置"/>
          </a-form-model-item>
          <a-button style="margin-top: 4px;" type="primary" icon="search" @click="loadData">查询</a-button>
          <a-button style="margin-top: 4px;" icon="reload" @click="resetData">重置</a-button>
        </a-form-model>
      </template>
      <template slot="table">
        <a-table
          :columns="columns"
          :dataSource="data"
          rowKey="id"
          v-bind="tableConfig"
        >
          <template slot="state" slot-scope="text">
          <span>
<!--            价格{{text}}-->
          </span>
          </template>
          <template slot="permType" slot-scope="text,record">
            {{ permTypeMaps[text] }}
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button type="link" @click="edit(record)">
              修改
            </a-button>
<!--            <a-button v-if="record.permType!=='2'" type="link" @click="addSub(record)">
              新增{{ record.pPermId !== '0' ? '功能点' : '下级' }}
            </a-button>-->
<!--            <a-popconfirm-->
<!--              title="确定删除吗?"-->
<!--              @confirm="del(record)"-->
<!--              okText="是"-->
<!--              cancelText="否"-->
<!--            >-->
<!--              <a-button type="link">删除</a-button>-->
<!--            </a-popconfirm>-->
          </template>
        </a-table>
      </template>
    </query-layout>
    <permission-add ref="permAdd" @success="loadData"/>
  </div>
</template>

<script>
import {dictService} from "@/api/common";
import {tableMixin, pageMixin} from '@/mixins'
import {list2treePerm} from '@/utils/func';
import permissionAdd from "./components/permissionAdd";
import {qryAllPermission, del} from '@/api/system/permission'
import QueryLayout from "@/components/layouts/QueryLayout";
import {getProtocolGoodsPageList,detailProtocolGoodsPage} from "@/api/goodsSort/goodsSort";

export default {
  mixins: [tableMixin, pageMixin],
  components: {QueryLayout, permissionAdd},
  data() {
    return {
      dataDictLists: {},
      dataDictMap: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      selectedKeys: [],
      data: [{index:1}],
      originData: [],
      selected: {state: '1'},
      forms: {},
      permTypeMaps: {
        '1': '菜单权限',
        '2': '功能权限',
        // '3': '数据权限'
      },
      state: 'add',
      form: {

      },
      columns: [
        {
          title: '商品名称',
          dataIndex: 'originGoodsName',
          width: 250
        },
        {
          title: '商品配置',
          dataIndex: 'configuration',
          width: 250
        },
        {
          title: '开启状态',
          dataIndex: 'status',
          customRender: text => text == 1 ? '启用' : '禁用',
          width: 140,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 140,
        },
/*        {
          title: '商品规格',
          dataIndex: 'createTime',
          width: 140,
        },
        {
          title: '商品颜色',
          dataIndex: 'pUrl'
        },
        {
          title: '商品状态',
          dataIndex: 'state',
          align: "center",
          scopedSlots: {customRender: 'state'}
        },
        {
          title: '当日涨跌价格', //（+绿色 -红色 手机端显示）
          dataIndex: 'remark'
        },
        {
          title: '供需标识', //(大量要、需求少)
          dataIndex: 'remark'
        },*/
        {
          title: '操作',
          scopedSlots: {customRender: 'action'},
          width: 140,
        }
      ]
    }
  },
  created() {
    // dictService(this, ["ENABLE_STATUS"])
    this.loadData()
  },
  methods: {
    resetData(){
      this.$refs.form.resetFields()
      this.loadData()
    },
    loadData() {
      this.tableLoading = true
      let param = {
        page: this.paging.page,
        limit: this.paging.limit,
        ...this.form
      }
      getProtocolGoodsPageList(param).then(response => {
        this.tableLoading = false
        if (response.code === 0) {
          this.data = response.data.records
          // this.originData = list2treePerm(response.data, "permId", "pPermId", "permName");
          // this.data = this.originData.slice(0, this.paging.pageSize)
          // console.log(this.data,'data')
          this.paging.total = Number(response.data.total)
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    pageChange(page, pageSize) {
      this.paging.page = page
      this.paging.pageSize = pageSize
      this.loadData()
    },
    onClick(event, info) {
      this.selectedKeys = [info.dataRef.id]
      this.selected = info.dataRef.data
      this.state = 'update'
    },
    add() {
      this.$refs.permAdd.visible = true
      this.$refs.permAdd.title = '新增'
      this.$refs.permAdd.add()
    },
    edit(record) {

      let param = {
        protocolGoodsId:record.id
      }
      detailProtocolGoodsPage(param).then(res => {
        if (res.code == 0){
          console.log('this.$refs.permAdd.edit(record.data)',res)
          console.log('this.$refs.permAdd.edit(record.data)',res.data)
          this.$refs.permAdd.visible = true
          this.$refs.permAdd.title = '修改'
          // this.$refs.permAdd.disabled = record.pPermId !== '0' && record.permType === '2'
          this.$refs.permAdd.edit(res.data)
        }
      })

    },
    deleteGood(record){

    },
    addSub(record) {
      this.$refs.permAdd.visible = true
      this.$refs.permAdd.title = '新增'
      const data = {pPermId: record.id}
      if (record.pPermId !== '0') {
        data.permType = '2'
      }
      this.$refs.permAdd.disabled = record.pPermId !== '0'
      this.$refs.permAdd.add(data)
    },
    del(record) {
      del({permId: record.id}).then(response => {
        if (response.code === 0) {
          this.loadData()
        }
      })
    }
  }
}
</script>

<style scoped>
.mt10 {
  margin-top: 10px;
}

.item-Box {
  min-width: 100%;
}
</style>
